<template>
	<view>
		<view class="page-section page-section-gap">
			<view>
			</view>
			<map style="width: 100%; height: 300px;" :id=1 :latitude="position.latitude" :longitude="position.longitude"
				:markers="markers">
			</map>
		</view>
				<button type="" @click="getLocation">获取位置</button>
		<button id="clock" type="primary" @click="punch">一键打卡</button>
		<usertabbar :current="current" v-if="roleid===0">122232</usertabbar>
	</view>
</template>

<script>
	import usertabbar from '../../../component/tabBar/stafftabBar.vue'
	export default {
		components:{
			usertabbar
		},
		data() {
			return {
				roleid: 0,
				current:1,  
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				position: {
				latitude: 30.58180,
				longitude: 103.98923,					
				},
				markers: [{
					id: 1,
					latitude: 30.58180,
					longitude: 103.98923,
					iconPath: '../../../static/atd.png',
					width: "40",
					height: "40"
				}]
			}
		},
		methods: {
			getLocation() {
				let that = this
				// 获取用户是否开启 授权获取当前的地理位置、速度的权限。
				//uni.getSetting不支持H5
				uni.getSetting({
					success(res) {
						// console.log(res)
						// 如果没有授权
						if (!res.authSetting['scope.userLocation']) {
							// 则拉起授权窗口
							uni.authorize({
								scope: 'scope.userLocation',
								success() {
									//点击允许后--就一直会进入成功授权的回调 就可以使用获取的方法了
									uni.getLocation({
										type: 'wgs84',
										success: function(res) {
											that.longitude = res.longitude
											that.latitude = res.latitude
											console.log(res)
											console.log('当前位置的经度：' + that.longitude)
											console.log('当前位置的纬度：' + that.latitude)
											uni.showToast({
												title: '正在定位',
												icon: 'loading',
												mask: true
											})
										},fail(error) {
											console.log('失败', error)
										}
									})
								},fail(error) {
									//点击了拒绝授权后--就一直会进入失败回调函数--此时就可以在这里重新拉起授权窗口
									console.log('拒绝授权', error)

									uni.showModal({
										title: '提示',
										content: '若点击不授权，将无法使用位置功能',
										cancelText: '不授权',
										cancelColor: '#999',
										confirmText: '授权',
										confirmColor: '#f94218',
										success(res) {
											console.log(res)
											if (res.confirm) {
												// 选择弹框内授权
												uni.openSetting({
													success(res) {
														console.log(res.authSetting)
													}
												})
											} else if (res.cancel) {
												// 选择弹框内 不授权
												console.log('用户点击不授权')
											}
										}
									})
								}
							})
						} else {
							// 有权限则直接获取
							uni.getLocation({
								type: 'wgs84',
								success: function(res) {
									that.longitude = res.longitude
									that.latitude = res.latitude
									console.log(res)
									console.log('当前位置的经度：' + that.longitude)
									console.log('当前位置的纬度：' + that.latitude)
									uni.showToast({
										title: '正在定位',
										icon: 'loading',
										mask: true
									})
								},fail(error) {
									uni.showToast({
										title: '请勿频繁调用！',
										icon: 'none',
									})
									console.log('失败', error)
								}
							})
						}
					},fail(error) {
						console.log('失败', error)
					}	
				})

			},
			punch: function() {
				/* axios({
					method: 'POST',
					url: 'smartAttendance/sign/clockIn',
					data: {
						userid: ,
						position:,
						currentTime: ,
						endTime: ,
						week

					}
				}).then(res => {
					console.log(res.data)
				
					} else {
					
					}
				
				}, error => {
					console.log('错误', error.message)
				})*/
			}
		},
		onShow: function() {
			uni.hideTabBar({
				animation: false
			})
		},
		onLoad() {
			/* const that = this
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					that.longitude = res.longitude;
					that.latitude = res.latitude;
				}
			}); */
		}
	}
</script>

<style>
	template {
		height: 100%;
		width: 100%;
	}

	#clock {
		margin-top: 40upx;
	}
</style>